<template>
  <div class="limiter">
    <div class="container-login100 " style="position:relative;">
      <img v-if="Success" src="../assets/img/bg.png"
           style="position: absolute;width: 350px;margin: 0;padding: 0;" alt=""/>
      <div class="wrap-login100  pt-page-scaleUp  page-wrap" v-if="!Success"
           style="background-color: rgba(255,255,255,0.1);">
        <form class="login100-form validate-form">
          <span class="login100-form-title p-b-49" style="color:dodgerblue;">驾考APP推荐</span>

          <div class="wrap-input100 validate-input m-b-23">
            <div style="display: flex;flex-direction: row;">
              <div style="width: 20%;">
                <img src="../assets/img/phone.png" class="div1-item-img" alt="">
              </div>
              <input style="width:48%" class="input100" type="text" v-model="phone" name="phone" placeholder="请输入手机号"
                     autocomplete="off">
            </div>
          </div>

          <div class="wrap-input100 validate-input">

            <div style="display: flex;flex-direction: row;position:relative;width: 100%">
              <div style="width: 20%;">
                <img src="../assets/img/checkcode.png" class="div1-item-img" alt=""/>
              </div>
              <div style="display: flex;width: 80%">
                <input style="width:60%;display: flex;" class="input100" type="text" name="code" v-model="code"
                       placeholder="请输入验证码">
                <div style="display: flex; justify-content: space-between;width: 40%">
                  <button @click="getCode" v-if="!hasCode" type="button"
                          style="width: 100%;margin: 10px 12px 10px 0;background-color: dodgerblue ;color: #FFFFFF;border-radius: 10px;">
                    获取验证码
                  </button>
                  <button v-else type="button"
                          style="width: 100%;background-color: dodgerblue;color: #FFFFFF;border-radius: 50px;height: 50px;">
                    {{ time }}S
                  </button>
                </div>
              </div>


            </div>
          </div>

          <div class="wrap-input100 validate-input m-b-23">
            <div style="display: flex;flex-direction: row;">
              <div style="width: 20%;">
                <img src="../assets/img/username.png" class="div1-item-img" alt=""/>
              </div>
              <input style="width:48%" class="input100" type="text" v-model="username" name="username"
                     placeholder="请输入用户名"
                     autocomplete="off">
            </div>

          </div>

          <div class="wrap-input100 validate-input">
            <div style="display: flex;flex-direction: row;">
              <div style="width: 20%;">
                <img src="../assets/img/password.png" class="div1-item-img" alt=""/>
              </div>
              <input style="width:48%" class="input100" type="password" v-model="password" name="pass"
                     placeholder="请输入密码">
            </div>

          </div>
          <div class="container-login100-form-btn" style="margin-top: 50px;">
            <div class="wrap-login100-form-btn">
              <!--              <div class="login100-form-bgbtn"></div>-->
              <button type="button" @click="register" class="login100-form-btn">立即注册</button>
            </div>
          </div>
        </form>
      </div>
      <div class="Success" style="width: 100%;top:5%;position: absolute;background-color: rgba(255,255,255,0.1);"
           v-if="Success">
        <img src="../assets/img/success.png" style="width: 70px" alt="">
        <h2 style="color: orange;">好友推荐您使用驾考APP</h2>
        <div class="download" style="display: flex;flex-direction: column">
          <div>
            <img @click="downAndroid()" style="width: 260px;" src="../assets/img/btn0.png"
                 alt="">
            <!--/*            <h4 style="text-align: center;color: orange">安卓手机下载</h4>*/-->
          </div>
          <div>
            <img @click="downIos()" style="width: 260px;" src="../assets/img/btn1.png" alt="">
            <!--            <h4 style="text-align: center;color: orange">苹果手机下载</h4>-->
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import md5 from '../assets/js/md5.js';


export default {
  name: 'HelloWorld',
  data() {
    return {
      phone: '',
      password: '',
      username: '',
      code: '',
      time: 60,
      timer: 0,
      Success: false,
      hasCode: false,
    }
  },
  props: {},
  created() {
    this.Success = this.getQueryVariable("done")
  },
  mounted() {
  },
  methods: {
    downAndroid() {
      window.location.href = "https://www.aqijiaoyu.com/yszc/app-jiaxiaokemuyikemusi-release.apk"
    },

    downIos() {
      this.$notify.error({
        title: '抱歉',
        message: '功能待完善,请去应用商店下载'
      })
    },

    async getCode() {
      if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
        this.$notify.error({
          title: '错误',
          message: '手机号格式错误'
        })
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '发送中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      let codeRes = await this.$axios.post('User/SendSMSRegVCode',
          {ShouJiHao: this.phone}
      );
      loading.close()
      if (codeRes.data.msg === 'OK') {
        this.$notify.success({
              title: '成功',
              message: '短信发送成功，请注意查收',
            }
        );
        this.hasCode = true;
        this.timer = setInterval(() => {
          this.time--;
          if (this.time === 0) {
            this.hasCode = false
            this.time = 60;
            clearInterval(this.timer)
          }
        }, 1000)
      } else {
        if (codeRes.data.msg === "手机号已注册，不能重复注册") {
          this.Success = true
          window.location.href = this.changeURLArg(window.location.href, 'done', true)
        }
        this.$notify.info({
          title: '错误',
          message: codeRes.data.msg
        });

      }
    },

    checkCode() {
      if (this.code === '') {
        this.$notify.error({
          title: '错误',
          message: '验证码为空'
        })
        return false
      }
      if (this.password.length < 6) {
        this.$notify.error({
          title: '错误',
          message: '密码不得少于6位'
        })
        return false
      }
      return true
    },

    async register() {
      if (!this.checkCode()) {
        return
      }
      let res = await this.$axios.post(
          'User/RegUserByJiaoLian',
          {
            ShouJiHao: this.phone,
            MiMa: md5.md5(this.password),
            NiCheng: this.username,
            AppName: "",
            VerifyCode: this.code,
            PId: this.$store.state.pId
          }
      );
      if (res.data.msg === "OK") {
        this.$notify({
          title: '成功',
          message: '注册成功',
          type: 'success'
        })
        this.Success = true
        window.location.href = this.changeURLArg(window.location.href, 'done', true)
      } else {
        this.$notify.error({
          title: '错误',
          message: res.data.msg
        })
      }

    },

    changeURLArg(url, arg, arg_val) {
      let pattern = arg + '=([^&]*)';
      let replaceText = arg + '=' + arg_val;
      if (url.match(pattern)) {
        let tmp = '/(' + arg + '=)([^&]*)/gi';
        tmp = url.replace(eval(tmp), replaceText);
        return tmp;
      } else {
        if (url.match('[\?]')) {
          return url + '&' + replaceText;
        } else {
          return url + '?' + replaceText;
        }
      }
    },

    getQueryVariable(variable) {
      let query = window.location.search.substring(1);
      let vars = query.split("&");
      for (let i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] === variable) {
          if (pair[1] === "true") {
            return true
          }
        }
      }
      return false;
    }
  }
}
</script>

<style scoped>
.page-wrap {
  top: calc(0.1 * 100vh);
  position: absolute;
}


.download {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
}

.Success {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px;
  border-radius: 15px;
  padding: 30px 15px;

}

.div1-item-img {
  width: 35px;
  height: 35px;
  margin: 10px;
}

.Success img {
  margin: 10px;
}

.input100 {
  /*background-color: #9f2424;*/
  color: black;
  font-size: 1.2rem;
}

input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
  color: #BDCADA;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
  color: #BDCADA;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
  color: #BDCADA;
}

input:-ms-input-placeholder { /* Internet Explorer 10+  适配ie*/
  color: #BDCADA;
}

h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #FFFFFF;
}
</style>
